<template>
<div class="c">
  <div class="check1"
       style="background-color: #ffffff">
    <div class="searchArea" >
      <form action="###"
            class="searchForm">
        <input type="text" v-model="keywords">
        <button class="sui-btn btn-xlarge btn-danger"
                type="button"
                @click="goSearch">
          搜索
        </button>
        <el-button @click="delay" style="margin-left:10px;">取消</el-button>
       
        <el-select @change="selectButton" v-model="selected"  style="margin-left:20px" >
             <el-option value="" label="请选择" />
             <el-option

                v-for="item in goodsstatus"
                :key="item"     
                :label="item"
                :value="item"
  
                
             />
    </el-select>

      </form>
    </div>
    <el-table class="table1"
              :data="tableData"
              style="width: 100%"
              max-height="500">
    <el-table-column fixed
                     prop="id"
                     label="货物Id"
                     width="120">
    </el-table-column>
    <el-table-column prop="name"
                     label="货物名称"
                     width="120">
    </el-table-column>
    <el-table-column prop="number"
                     label="货物数量"
                     width="120">
    </el-table-column>
    <el-table-column prop="locationId"
                     label="库区"
                     width="100">
    </el-table-column>
    <el-table-column prop="warehouseEntryTime"
                     label="入库时间"
                     width="150">
    </el-table-column>
    <el-table-column prop="deadlineTime"
                     label="存放截止时间"
                     width="150">
    </el-table-column>
   <!--  <el-table-column prop="warningTime"
                     label="距过期时间"
                     width="150">
    </el-table-column> -->
    <el-table-column prop="status"
                     label="货物状态"
                     width="120">
    </el-table-column>
  </el-table>
  <div class="block">
    <el-pagination @size-change="handleSizeChange"
                   @current-change="handleCurrentChange"
                   :current-page="this.page.currentPage"
                   :page-sizes="[10, 20, 30, 40,50]"
                   :page-size="this.page.pageSize"
                   layout="total, sizes, prev, pager, next, jumper"
                   :total="this.page.total">
    </el-pagination>
  </div>
</div>
</div>
</template>

<script>
import axios from '../../../axios'
export default {
  data () {
    return {
      tableData: [
        {
          // 导入数据
        }
      ],
      selected:"",
      goodsstatus:[
        "入库待核验",
         "已入库",
         "出库待核验",
         "已出库"

      ],
      keywords: '',
      searchBoolean: false,
      page: {
        // 当前页码
        currentPage: 1,
        // 每页条数
        pageSize: 10,
        // 数据总条数
        total: ''
      }
    }
  },
  methods: {
    selectButton(){
   axios({
        url: '/dp/goods/QueryByBlurry',
        method: 'post',
        data:{
                  blurryString: this.selected,
                  pageSize: this.page.pageSize,
                  currentPage: this.page.currentPage
                }
               ,

      }).then(res => {
        // 拿到后端分页数据
        this.tableData = res.data.data.records
        this.searchBoolean = true
        // 拿到后端数据总条数
        this.page.total = parseInt(res.data.data.total)
      })
    },
    delay () {
      this.keywords = '',

      axios({
        url: '/dp/goods/QueryByBlurry',
        method: 'post',
        data:{
                  blurryString: this.keywords,
                  pageSize: this.page.pageSize,
                  currentPage: this.page.currentPage
                }
               ,

      }).then(res => {
        // 拿到后端分页数据
        this.tableData = res.data.data.records
        this.searchBoolean = true
        // 拿到后端数据总条数
        this.page.total = parseInt(res.data.data.total)
      })
    },
    

    // 模糊查询分页调用共同函数
    serarch () {
      axios({
        url: '/dp/goods/QueryByBlurry',
        method: 'post',
        data:
                {
                  blurryString: this.keywords,
                  pageSize: this.page.pageSize,
                  currentPage: this.page.currentPage
                },
      }).then(res => {
        // 拿到后端分页数据
        this.tableData = res.data.data.records
        this.searchBoolean = true
        // 拿到后端数据总条数
        this.page.total = parseInt(res.data.data.total)
      })
    },
    // 模糊查询
    goSearch () {
      this.page.currentPage = 1,
      this.serarch()
    },
    // 条数选择
    handleSizeChange (val) {
      this.page.pageSize = val
      this.page.currentPage = 1
      if (this.searchBoolean) {
        // 如果执行了模糊查询则调用该接口分页
        this.serarch()
        return
      }
      axios({
        url: '/dp/goods/query',
        method: 'post',
        // 上传page参数,让后端进行分页
        data: JSON.stringify(this.page)
      }).then(res => {
        // 拿到后端分页数据
        this.tableData = res.data.data.records
        // 拿到后端数据总条数
        this.page.total = parseInt(res.data.data.total)
      })
    },
    // 下一页
    handleCurrentChange (val) {
      this.page.currentPage = val
      console.log(`当前页: ${val}`)
      if (this.searchBoolean) {
        // 如果执行了模糊查询则调用该接口分页
        this.serarch()
        return
      }
      axios({
        url: '/dp/goods/query',
        method: 'post',
        // 需要想办法传入page对象
        data: JSON.stringify(this.page)
      }).then(res => {
        this.tableData = res.data.data.records
      }).catch(err => {
        this.$alert(err.response.data.msg, '请联系管理员', {
          confirmButtonText: '确定',
          callback: action => {

          }
        })
      })
    }

  },
  created () {
    // 页面刷新时重置搜索框和按键状态
    this.keywords = '',
    this.searchBoolean = false,
    console.log(this.page)
    axios({
      url: '/dp/goods/query',
      method: 'post',
      // 需要想办法传入page对象
      data: JSON.stringify(this.page)
    }).then(res => {
      this.tableData = res.data.data.records
      this.page.total = parseInt(res.data.data.total)
      console.log(this.page.total)
    }).catch(err => {
      console.log(err.response)
      this.$alert(err.response.data.msg, '请联系管理员', {
        confirmButtonText: '确定',
        callback: action => {

        }
      })
    })
  }
}
</script>

<style lang="less" >

.c{
  width: 1200px;
    margin: 30px auto;
    display: flex;
    position: relative;
.check1 {
  height: 600px;
  overflow: hidden;
  margin-left: 40px;
  margin-top: 30px;
.cell
{
  font-weight: bold;
  font-size: 20px;
  color: rgb(61, 59, 59);
}
.el-pagination{
  .el-pagination__total{
  font-weight: bold;
  font-size: 20px;
  color: rgb(61, 59, 59);
}
.el-input__inner{
  font-weight: bold;
  font-size: 20px;
  color: rgb(61, 59, 59);
}
.button{
  font-weight: bold;
  font-size: 20px;
  color:rgb(61, 59, 59);
}
.el-pager
.number{
  font-weight: bold;
  font-size: 20px;

}
.el-pagination__jump{
  font-weight: bold;
  font-size: 20px;
  color:rgb(61, 59, 59);
}
}
  .searchArea {

    .searchForm {
      overflow: hidden;
      margin-right: 0px;

      input {
        box-sizing: border-box;
        width: 300px;
        height: 38px;
        padding: 0px 4px;
        border: 2px solid rgb(8, 138, 8);
        float: left;

        &:focus {
          outline: none;
        }

      }

      button {
        height: 38px;
        width: 68px;
        background-color: #0f778a;
        border: none;
        color: #fff;
        float: left;
        cursor: pointer;

        &:focus {
          outline: none;
        }
      }

    }

 }

     .table1{
     width: 980px!important;
   }

}
}
</style>
